//数据组件
<template>
    <div>
    <div class="demo-input-size" style="margin-bottom: 20px">
    用户名：
    <el-input
    style="width:400px;margin-bottom: 5px"
    size="medium"
    placeholder="请输入内容"
    v-model="name">
    </el-input>
    <span style="margin-left: 200px;">账号：
    </span>
    <el-input
    style="width:400px;margin-bottom: 5px"
    size="medium"
    placeholder="请输入内容"
    v-model="clientId">
  </el-input>
  <el-button size="small" style="margin-bottom: 5px;margin-left: 20px;background-color: #BEBEBE" @click="loadPost">查询</el-button>
  <el-button size="small" style="margin-bottom: 5px;margin-left: 20px;background-color: #BEBEBE" @click="loadPost">查询</el-button>
</div>
    <el-table :data="tableData"
    :header-cell-style="{background:'#3DC5A1',color:'#555'}"
    :border="true">
        <el-table-column prop="name" label="用户名" width="300">
        </el-table-column>
        <el-table-column prop="clientId" label="账号" width="300">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="300">
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="300">
        <template #default="scope">
          <el-tag 
            :type="scope.row.sex===1?'primary':'success'"
            disable-transitions>{{scope.row.sex===1?'男':'女'}}</el-tag>
        </template>
      </el-table-column>
        <el-table-column prop="password" label="密码" width="300">
        </el-table-column>
        <el-table-column prop="operate" label="操作" width="300">
        <el-button size="small" table="delete">删除</el-button>
        <el-button size="small" table="edit">编辑</el-button>
        </el-table-column>
      </el-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[7, 10, 12]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
      </div>
</template>

<style>
</style>

<script>
export default {
  name: "USer",
  data() {
      return {
        tableData:[],
        pageNum:1,
        pageSize:1,
        total:1,
        name:'',
        clientId:''
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageNum=1;
        this.pageSize=val;
        this.loadPost();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNum=val;
        this.loadPost();
      },
        loadGet(){
            this.$axios.get('http://localhost:8082/user/list').then(res=>res.data).then(res=>{
                console.log(res);
                this.tableData = res;
            })
        },
        loadPost(){
            this.$axios.post('http://localhost:8082/user/listPage',{
              pageNum:this.pageNum,
              pageSize:this.pageSize,
              total:this.total,
              param:{
                name:this.name,
                clientId:this.clientId

              }
            }).then(res=>res.data).then(res=>{
                console.log(res)
                if (res.code==200){
                    this.tableData = res.data;
                    this.total=res.total;
                    
                }else{
                    alert("获取失败")
                }
            })
        }
    },
    beforeMount() {
        this.loadGet();
    },
    
}
</script>